<template>
  <div>
    <FormTitle :text="title" class="mb-2" />
    <BasicTable @register="registerMatchingList">
      <template #tableTitle>
        <a-button @click="handleCreateMatching" type="primary"> 新增 </a-button>
      </template>
      <template #emptyText>
        <div>暂无数据</div>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '编辑',
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <EditModal @register="registerMatchingModal" @success="handleMatchingSuccess" />
  </div>
</template>

<script lang="ts" name="Matching">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { matchingColumns } from './matching.data';
  import EditModal from './EditModal.vue';
  import FormTitle from '/@/components/HFormTitle';

  export default defineComponent({
    components: { BasicTable, EditModal, TableAction, FormTitle },
    props: {
      code: String,
      title: {
        type: String,
        default: '配置回传数据',
      },
    },
    setup(props) {
      const [
        registerMatchingList,
        { setTableData: setMatchingTableData, getDataSource: getMatchingDataSource },
      ] = useTable({
        dataSource: [],
        columns: matchingColumns,
        pagination: false,
        scroll: { y: 700 },
        emptyDataIsShowTable: false,
        actionColumn: {
          width: 200,
          title: '操作',
          dataIndex: 'action',
          fixed: 'right',
        },
      });
      const [registerMatchingModal, { openModal: openMatchingModal }] = useModal();
      function handleCreateMatching() {
        openMatchingModal(true, {
          isEdit: false,
          code: props.code,
        });
      }
      function handleMatchingSuccess(data, isEdit) {
        const tableList = getMatchingDataSource() || [];

        if (isEdit) {
          const index = tableList.findIndex((item) => item.key === data.key);
          tableList.splice(index, 1, data);
          setMatchingTableData(tableList);
        } else {
          setMatchingTableData(tableList.concat(data));
        }
      }
      function handleEdit(record: Recordable) {
        openMatchingModal(true, {
          ...record,
          isEdit: true,
          code: props.code,
        });
      }
      async function handleDelete(record: Recordable) {
        const tableList = getMatchingDataSource();
        const index = tableList.findIndex((item) => item.key === record.key);
        tableList.splice(index, 1);
      }
      return {
        registerMatchingList,
        handleCreateMatching,
        registerMatchingModal,
        handleMatchingSuccess,
        setMatchingTableData,
        getMatchingDataSource,
        handleEdit,
        handleDelete,
      };
    },
  });
</script>
<style lang="less" scoped>
  :deep(.ant-table-body) {
    padding-top: 0 !important;
  }
</style>
